<template>
  <div>
    <div>
      <mt-header title="编辑常用地址" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
        <mt-button icon="" slot="right" @click="saveAddres()">保存</mt-button>
      </mt-header>
    </div>
    <div>
      <mt-field label="姓名：" placeholder="请输入姓名" v-model="username"></mt-field>
    </div>
    <div>
      <mt-field label="手机号：" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
    </div>
    <div>
      <mt-cell is-link @click.native="popupVisible4 = true" size="large">
        <span slot="title">所在区域：</span>
        <span>{{myaddress}}</span>
      </mt-cell>
    </div>
    <div>
      <mt-popup v-model="popupVisible4" position="bottom" class="mint-popup-4">
        <div>
          <button class="address-cancl-button" @click="cancladdress()">取消</button>
          <span style="font-size: 15px;">{{area}}</span>
          <button class="address-cancl-confirm" @click="confirmaddress()">确定</button>
        </div>
        <div>
          <mt-picker :slots="myAddressSlots" @change="onMyAddressChange" style="width:100%;"></mt-picker>
        </div>
      </mt-popup>
    </div>
    <div>
    </div>
    <div>
      <mt-field label="详细地址：" placeholder="请输入详细地址" type="address" v-model="detiladdress"></mt-field>
    </div>
    <div>
      <mt-field label="邮编：" placeholder="请输入邮编号" type="zipCode" v-model="zipCode"></mt-field>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import { Picker } from "mint-ui";
import myaddress from "../../assets/data/address3.json";
export default {
  components: {
    "mt-picker": Picker
  },

  data() {
    return {
      dzid: this.$route.query.rq,
      popupVisible4: false,
      username: "",
      phone: "",
      city: "",
      county: "",
      province: "",
      area: "",
      detiladdress: "",
      zipCode: "",
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "center"
        }
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县",
      myaddress: ""
    };
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },
    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
        let province = values[0];
        let city = values[1];
        let county = values[2];
        let area = province + "." + city + "." + county;
        this.area = area;
        this.province = province;
        this.city = city;
        this.county = county;

        this.myAddressProvince = values[0];
        this.myAddressCity = values[1];
        this.myAddresscounty = values[2];
        //this.popupVisible4 = false;
      }
    },
    confirmaddress() {
      this.myaddress = this.area;
      this.myAddressProvince = this.province;
      this.myAddressCity = this.city;
      this.myAddresscounty = this.county;
      this.myaddress =
        this.myAddressProvince +
        "." +
        this.myAddressCity +
        "." +
        this.myAddresscounty;
      this.popupVisible4 = false;
    },
    cancladdress() {
      this.popupVisible4 = false;
    },
    saveAddres() {
      if (this.username != null && this.username != "") {
        if (this.phone != null && this.phone != "") {
          //手机号正则表达式
          let sjreg = /^1[3|4|5|7|8][0-9]{9}$/;
          if (sjreg.test(this.phone)) {
            axios({
              method: "post",
              url: "/api/cydzglupdate/detail.htm",
              params: {
                dzid: this.dzid,
                szxs: this.myAddressProvince,
                qdjs: this.myAddressCity,
                xjqy: this.myAddresscounty,
                mc: this.username,
                yb: this.zipCode,
                xxdz: this.detiladdress,
                sjh: this.phone
              }
            }).then(res => {
              res = res.data;
              if (res.zt === "true") {
                history.go(-1);
              } else {
                Indicator.close();
                let instance = Toast({
                  message: "加载失败"
                });
                setTimeout(() => {
                  instance.close();
                }, 2000);
              }
            });
          } else {
            Indicator.close();
            let instance = Toast({
              message: "手机号格式不正确"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
          }
        } else {
          Indicator.close();
          let instance = Toast({
            message: "手机号不能为空"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      } else {
        Indicator.close();
        let instance = Toast({
          message: "姓名不能为空"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      //vue里面全部加载好了再执行的函数  （类似于setTimeout）
      this.myAddressSlots[0].defaultIndex = 0;
      // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
      //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
      axios({
        method: "post",
        url: "/api/cydzgledit/detail.htm",
        params: {
          dzid: this.dzid
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          console.log(res);
          this.username = res.data.mc;
          this.phone = res.data.sjh;
          this.province = res.data.szxs;
          this.city = res.data.qdjs;
          this.county = res.data.xjqy;
          this.myaddress = this.province + "." + this.city + "." + this.county;
          this.detiladdress = res.data.xxdz;
          this.zipCode = res.data.yb;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    });
  }
};
</script>

<style scoped>
.mint-popup-4 {
  width: 100%;
}
.mint-popup-4 .picker-slot-wrapper,
.picker-item {
  backface-visibility: hidden;
}
.address-cancl-button {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  line-height: 20px;
  font-size: 15px;
  color: #26a2ff;
  float: left;
}
.address-cancl-confirm {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  line-height: 20px;
  font-size: 15px;
  color: #26a2ff;
  float: right;
}
</style>
